<template>
    <div class="scroll-page-wrap" @scroll="scrollPage">
        <div style="padding:10px 10px 0;">
           <c-words v-once></c-words>
        </div>
        <div style="padding:10px 10px 0;">
            <c-geo v-once></c-geo>
        </div>
        <div class="flex-wrap" style="padding:10px 10px 0;">
             <div class="col1">
                  <c-news v-once></c-news>
             </div>
             <div class="col2">
                 <c-comwords v-once></c-comwords>
             </div>
        </div>
        <div class="flex-wrap" style="padding:10px 10px 0;" >
            <div class="col32">
                  <c-swordcloud v-once></c-swordcloud>
            </div>
            <div class="col31">
                  <c-hot-point v-once></c-hot-point>
            </div>
        </div>
        <div class="flex-wrap" style="padding:10px 10px 0;">
             <div class="col21">
                <c-sfrom v-once></c-sfrom>
             </div>
             <div class="col23">
                <c-words-trend v-once></c-words-trend>
             </div>
        </div>
        <div class="flex-wrap" style="padding:10px 10px 10px;">

            <div class="col32">
                <c-history v-once></c-history>
            </div>
            <div class="col31">
                <c-trend v-once></c-trend>
            </div>
        </div>
    </div>
</template>
<script>
import delegate from '../js/event.js';
import CNews from '../chart/Chart_t_news.vue';  // 技术新闻
import CWords from '../chart/Chart_t_words.vue'; // 热词图谱
import CTrend from '../chart/Chart_t_tdtrend.vue'; //
import CHistory from '../chart/Chart_t_tdhistory.vue';
import CHotPoint from '../chart/Chart_t_tdhotpoint.vue';
import CMap from '../chart/Chart_t_map.vue';
import CGeo from '../chart/Chart_t_geo.vue';
import CWordsTrend from '../chart/Chart_t_wordstrend.vue';
import CSfrom from '../chart/Chart_t_drsourefrom.vue'; // 动态信息来源
import CSwordcloud from '../chart/Chart_t_comwordCloud.vue'; // 词云
import CComwords from '../chart/Chart_t_comwrods.vue'; // 共词分析
import { setTimeout } from 'timers';
import mixin from '../js/mixin.js';

export default {
    mixins:[mixin],
    data() {
        return {
           drawer: false,
        }
    },
    created() {

    },

    mounted () {
        delegate.$emit('drawer-hide');
        delegate.$emit('s-resize');
    },
    beforeDestroy(){
        delegate.$off('s-drawer',this.showDrawer);
    },
    components: {
        CNews,
        CWords,
        CTrend,
        CHistory,
        CHotPoint,
        CMap,
        CGeo,
        CWordsTrend,
        CSfrom,
        CComwords,
        CSwordcloud
    },
    methods: {
        isvisible(boll) {
           // 传递显示
           delegate.$emit('draw-open',boll)
        },
        showDrawer(){
           this.drawer = true;
        },
        scrollPage(e){
            console.log(e)

        }
    },
}
</script>
<style lang="scss" scoped>
    .scroll-page-wrap{
        overflow: hidden;
    }
    .flex-wrap{
        display: flex;
        .col1{
            flex: 0 0 33.4%;
        }
        .col2{
            flex: 1;
            padding-left: 10px;
        }
        .col21{
            flex: 0 0 60%;
            padding-right: 10px;
        }
        .col23{
            flex: 0 0 40%;
        }
        .col31{
            flex: 0 0 40%;

        }
        .col32{
            flex: 1;
            padding-right: 10px;
        }
    }
    .screen-v1{
        display: flex;
        padding: 10px;
        .col1{
            padding-right: 10px;
            flex: 1;
        }
        .col2{
            padding-right: 10px;
            flex: 2;

        }

    }
    .screen-v2{
        padding: 0 10px;
        display: grid;
        grid-template-columns: 30% 40.00%  30%;
        overflow: hidden;
        grid-row-gap:10px;
        grid-column-gap:10px;
        box-sizing: border-box;
    }
    .page-grid{
        display: grid;
        grid-template-columns: 66.66%  33.33%;
        overflow: hidden;
        grid-row-gap:30px;
        grid-column-gap:30px;
    }
    .s-drawer{
        .ivu-drawer-content{
            background-color: #000;
            padding-top: 60px;
        }
    }

    .drawer-close{
        display: flex;
        flex-direction: column;
        font-size: 26px;
        align-items: center;
        color: #98caec;
        span{
            font-size: 12px;
        }
    }

</style>


